<template>
  <!--组件展示区域-->
  <el-scrollbar class="scrollbar-view">
    <div class="component-view">
      <el-tooltip class="backTop" effect="dark" content="返回顶部" placement="right-end">
        <i class="el-icon-arrow-up"></i>
      </el-tooltip>
      <div class="mobile-content" :style="setPageStyle">
        <el-tooltip class="setting" effect="dark" content="页面设置" placement="left-start">
          <i class="el-icon-setting" @click="pageSetting"></i>
        </el-tooltip>
        <draggable
          :list="elementList"
          :animation="340"
          ghost-class="ghost"
          draggable=".item"
          @change="addElement"
          class="draggable-target"
          group="componentsGroup">
          <div slot="header" ref="draggable-header" class="mobile-top">
            <img src="../../assets/topNavbar.png" alt="">
          </div>
          <div
            @click="clickElement(item)"
            v-for="(item,index) in elementList"
            :class="['component-warp','item',activePageUUID === item.id ? 'active':'']"
            :key="index">
            <component
              :defaultAttr="item.defaultAttr"
              :is="'view' + item.elName">
            </component>
            <div @click="delElement(item)" :class="[activePageUUID === item.id ? 'del-btn':'none']">
              <i class="iconfont icon-lajitong"></i>
              &nbsp;&nbsp;
              <span style="color: #2F404F">{{ item.title }}</span>
            </div>
          </div>
        </draggable>
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
  import draggable from 'vuedraggable'
  import {mapGetters} from 'vuex'
  import {register_components_object} from "@/plugins";

  export default {
    name: "pageWrapper",
    components: {
      draggable,
      ...register_components_object
    },
    data() {
      return {
      }
    },
    computed: {
      ...mapGetters(['elementList', 'pageConfig', 'activeElement','activePageUUID']),
      setPageStyle() {
        const {pageColor} = this.pageConfig
        return {
          backgroundColor: pageColor
        }
      }
    },
    methods: {
      addElement(elData) {
        this.$store.commit('elementsHandler', elData)
      },
      pageSetting() {
        this.$store.commit('settingPage')
      },
      clickElement(item) {
        this.$store.commit('setActiveElement', item)
      },
      delElement(item) {
        this.$store.commit('delElement', item)
      }
    },
    watch:{
      elementList(val){
        console.log(val)
      }
    }
  }
</script>

<style scoped>
  .active {
    border: 2px solid #2589ff;
    box-shadow: 0 2px 50px 5px rgb(50 59 77 / 50%);
  }

  .none {
    display: none;
  }

  .block {
    display: block;
  }

</style>
